import React, { memo, useEffect } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import CheckSingerItem from './check-singer-item';
import SingerHeader from '../../c-component/singer-header';
import { CheckSingerWrapper } from './style';
import { actionCreators } from "../../store/";

export default memo(function CheckSinger() {

    const dispath = useDispatch();
    useEffect(() => {
        dispath(actionCreators.getSongsAction());
    }, [dispath]);

    const { artistsList } = useSelector(state => ({
        artistsList: state.get("recommond").get("artistsList")
    }), shallowEqual);

    return (
        <CheckSingerWrapper>
            <SingerHeader title="入住歌手" isShowLink={true} link="/discover/artist"/>
            <div className="singer-content">
                {
                    artistsList.map((item, index) => {
                        return <CheckSingerItem name={item.name} picUrl={item.picUrl} alias={item.alias} key={item.name}/>
                    })
                }
            </div>
            <a className="apply recommend_left_image">申请成为网易音乐人</a>
        </CheckSingerWrapper>
    )
})
